<template>
  <transition name="slide-up">
    <div class="setting-wrapper" v-show="get_menu_visible && get_setting_visible === 0">
      <div class="setting-font-size">
        <div class="preview" :style="{fontSize: fontSizeList[0].fontSize + 'px'}">A</div>
        <div class="select">
          <div class="select-wrapper" v-for="(item, index) in fontSizeList" :key="index"
               @click="setFontSize(item.fontSize)">
            <div class="line"></div>
            <div class="point-wrapper">
              <div class="point" style="left: -11px" v-show="get_default_fontsize === item.fontSize">
                <div class="small-point"></div>
              </div>
            </div>
            <div class="line"></div>
          </div>
        </div>
        <div class="preview" :style="{fontSize: fontSizeList[fontSizeList.length - 1].fontSize + 'px'}">A</div>
      </div>
      <div class="setting-font-family" @click="showFontFamilyPopup">
        <div class="setting-font-family-text-wrapper">
          <span class="setting-font-family-text">{{get_default_fontfamily}}</span>
        </div>
        <div class="setting-font-family-icon-wrapper">
          <span class="icon-forward"></span>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import { ebookMixin } from 'js/mixin'
import params from 'js/params'
import { setFontSize } from 'js/storage'
export default {
  mixins: [ebookMixin],
  data() {
    return {
      fontSizeList: params.fontSizeList,
      defaultFontFamily: ''
    }
  },
  methods: {
    setFontSize(fontSize) {
      setFontSize(this.get_fileName, fontSize)
      this.set_default_fontSize(fontSize)
      this.get_book_handle.rendition.themes.fontSize(fontSize + 'px')
    },
    showFontFamilyPopup() {
      this.set_font_family_visible(true)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/global'
  .setting-wrapper
    position: absolute
    bottom: px2rem(48)
    left: 0
    z-index: 160
    display: flex
    flex-direction: column
    width: 100%
    height: px2rem(90)
    background: white
    box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, .15)
    .setting-font-size
      flex: 2
      display: flex
      height: 100%
      width: 100%
      .preview
        flex: 0 0 px2rem(40)
        Center()
      .select
        display: flex
        flex: 1
        .select-wrapper
          flex: 1
          display: flex
          align-items: center
          &:first-child
            .line
              &:first-child
                border-top: none
          &:last-child
            .line
              &:last-child
                border-top: none
          .line
            flex: 1
            height: 0
            border-top: px2rem(1) solid #ccc
          .point-wrapper
            position: relative
            flex: 0 0 0
            width: 0
            height: px2rem(7)
            border-left: px2rem(1) solid #ccc
            .point
              position: absolute
              top: px2rem(-8)
              width: px2rem(20)
              height: px2rem(20)
              border-radius: 50%
              background: white
              border: px2rem(1) solid #ccc
              box-shadow: 0 px2rem(4) px2rem(4) rgba(0, 0, 0, .15)
              Center()
              .small-point
                width: px2rem(5)
                height: px2rem(5)
                background: black
                border-radius: 50%
    .setting-font-family
      flex: 1
      font-size: px2rem(14)
      Center()
      .setting-font-family-text-wrapper
        Center()
      .setting-font-family-icon-wrapper
        Center()
</style>
